<template>
  <div class="head">
    <span class="myInfo"></span>
<!--    <p class="title">无 痕 音 乐</p>-->
    <div class="title">
      <svg>
        <!-- 这里重复覆盖4行相同的字，每行字不同颜色的断断续续，巧妙重叠成一行带有多颜色断断续续的字 -->
        <text text-anchor="middle" x="50%" y="70%" class="words words-1">无 痕 音 乐</text>
        <text text-anchor="middle" x="50%" y="70%" class="words words-2">无 痕 音 乐</text>
        <text text-anchor="middle" x="50%" y="70%" class="words words-3">无 痕 音 乐</text>
        <text text-anchor="middle" x="50%" y="70%" class="words words-4">无 痕 音 乐</text>
      </svg>
    </div>
    <span class="search"></span>
  </div>
</template>

<script>
  export default {
    name: "HeadNav"
  }
</script>

<style scoped lang="scss">
  .head{
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    background: $dark-background;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
  }
  .myInfo{
    flex: 1;
    position: relative;
  }
  .myInfo::after{
    content: '';
    width: 30px;
    height: 4px;
    border-radius: 5px;
    background: white;
    position: absolute;
    top: 0;
    left: 10px;
    box-shadow: 0px -12px 0px 0px white, 0px 12px 0px 0px white;
  }
  /*.title{*/
  /*  flex: 4;*/
  /*  text-align: center;*/
  /*  font-size: 0.35rem;*/
  /*  font-weight: bold;*/
  /*  letter-spacing: 10px;*/
  /*  line-height: 60px;*/
  /*  color: white;*/
  /*}*/
  .title{
    width: auto;
    height: 60px;
    flex: 4;
    text-align: center;
    position: relative;
  }
  .title svg{
    width: 100%;
    height: 60px;
    position: absolute;
    top: 0;
    left: 0;
  }
  .words{
    font-size: 0.54rem;
    font-weight: bold;
    fill: none;
    stroke-width: 1px;
    stroke-dasharray: 10, 28;
    animation: drawText 8s linear infinite;
  }
  .words-1{
    stroke: deepskyblue;
    text-shadow: 0 0 5px deepskyblue;
    animation-delay: -2s;
  }
  .words-2{
    stroke: lightgreen;
    text-shadow: 0 0 5px lightgreen;
    animation-delay: -4s;
  }
  .words-3{
    stroke: orange;
    text-shadow: 0 0 5px orange;
    animation-delay: -6s;
  }
  .words-4{
    stroke: purple;
    text-shadow: 0 0 5px purple;
    animation-delay: -8s;
  }

  @keyframes drawText {
    /** stroke-dashoffset = 上面样式里stroke-dasharray中的两个值的和 */
    to{
      stroke-dashoffset: -38;
    }
  }
  .search{
    flex: 1;
    position: relative;
  }
  /*.search::after{*/
  /*  content: '';*/
  /*  width: 30px;*/
  /*  height: 30px;*/
  /*  border: 2px solid white;*/
  /*  border-radius: 50%;*/
  /*  position: absolute;*/
  /*  top: 50%;*/
  /*  right: 10px;*/
  /*  transform: translate(0, -50%)*/
  /*}*/
</style>